<template>
  <div class="box">
    <div ref="tabWrapper" class="tab-wrapper">
      <i
        v-show="iconVisible"
        class="el-icon-arrow-left"
        @click="swipe('left')"
      ></i>
      <div ref="content" class="content">
        <div v-for="(item, idx) in list" :key="idx" class="item">
          {{ item.label }}
        </div>
      </div>
      <i
        v-show="iconVisible"
        class="el-icon-arrow-right"
        @click="swipe('right')"
      ></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iconVisible: false,
      list: [
        {
          label: '用户管理'
        },
        {
          label: '权限管理'
        },
        {
          label: '用户管理'
        },
        {
          label: '用户管理'
        },
        {
          label: '用户管理'
        },
        {
          label: '用户管理'
        },
        {
          label: '用户管理'
        },
        {
          label: '用户管理'
        },
        {
          label: '用户管理'
        }
      ]
    }
  },
  mounted() {
    let tabWrapper = this.$refs.tabWrapper
    let content = this.$refs.content
    if (content.scrollWidth > content.clientWidth) {
      this.iconVisible = true
    } else {
      this.iconVisible = false
    }
    window.addEventListener('resize', e => {
      console.log(tabWrapper.scrollWidth, tabWrapper.clientWidth)
      console.log(content.scrollWidth, content.clientWidth)
      if (content.scrollWidth > content.clientWidth) {
        this.iconVisible = true
      } else {
        this.iconVisible = false
      }
    })
  },
  methods: {
    swipe(direction = 'right') {
      let content = this.$refs.content
      console.log(content.scrollLeft)
      let distance = 0
      if (direction == 'right') {
        distance = content.scrollLeft + 150
      } else {
        distance = content.scrollLeft - 150
      }
      if (distance <= 0) {
        distance = 0
      }
      content.scrollTo(distance, 0)
    }
  }
}
</script>

<style lang="less">
.box {
  .tab-wrapper {
    display: flex;
    background: #eee;
    .content {
      flex: 1;
      display: flex;
      justify-content: center;
      overflow: auto;
      scroll-behavior: smooth;
      .item {
        margin-right: 20px;
        flex-shrink: 0;
      }
    }
    i {
      padding: 0 20px;
      cursor: pointer;
    }
  }
}
.content::-webkit-scrollbar {
  display: none;
}
</style>
